<template>
	<view class="Identity">
		<view class="explain">填写真实有效的信息，审核才会通过</view>
		<view class="form">
			<view class="form-item">
				<label>姓名</label>
				<input type="text" placeholder="请输入真实姓名" placeholder-style="text-align: right;" ></input>
			</view>
			<view class="form-item">
				<label>身份证号</label>
				<input type="idcard" placeholder="请输入身份证号码" placeholder-style="text-align: right;"></input>
			</view>
		</view>
		<view class="explain tips">
			<view class="tips_item">
				<view>*须本人身份证，且内容清晰可辨</view>
				<view>*请您确认拍照权限已开启</view>
			</view>
		</view>
		<view class="Identity_upload">
			<view class="idcard_positive" @click="uploadFn(0)">
				<image style="width: 100%; height: 100%;; background-color: #FFFFFF;" mode="scaleToFill" src="../../static/img/card_front.png"></image>
				<view class="idcard_positive_bg">
					<image style="width: 120rpx; height: 120rpx; " mode="scaleToFill" src="../../static/img/hcamera.png"></image>
					<view class="idcard_positive_bg_text">身份证正面照扫描上传</view>
				</view>
			</view>
			<view class="idcard_back" @click="uploadFn(1)">
				<image style="width: 100%; height: 100%;; background-color: #FFFFFF;" mode="scaleToFill" src="../../static/img/card_back.png"></image>
				<view class="idcard_positive_bg">
					<image style="width: 120rpx; height: 120rpx; " mode="scaleToFill" src="../../static/img/hcamera.png"></image>
					<view class="idcard_positive_bg_text">身份证反面照扫描上传</view>
				</view>
			</view>
			<view class="portrait_positive" @click="uploadFn(2)">
				<image style="width: 100%; height: 100%;; background-color: #FFFFFF;" mode="scaleToFill" src="../../static/img/faceImageWithHead.png"></image>
				<view class="idcard_positive_bg">
					<image style="width: 120rpx; height: 120rpx; " mode="scaleToFill" src="../../static/img/hcamera.png"></image>
					<view class="idcard_positive_bg_text">正面照片上传</view>
				</view>
			</view>
		</view>
		<button class="submit" @click="submitFn"  type="default">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		components: {
			
		},
		methods:{
			//上传图片
			uploadFn(tpye){
				console.log(tpye)
				var _self = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
					 const tempFilePaths = res.tempFilePaths;
					 _self.image = tempFilePaths[0];
					 console.log("tempFilePaths[0]",tempFilePaths[0])  //能够打印出选中的图片
					 _self.iconcheck = 1;//点击后图片更改状态由0变成1
					},
					error : function(e){
					 console.log(e);
					}
				});
			},
			//提交
			submitFn(){
				console.log('提交')
			}
		}
	}
</script>

<style lang="scss">
	.Identity{
		.explain{
			height: 88rpx;
			line-height: 88rpx;
			font-size: 28rpx;
			background-color: rgba(251, 234, 225, 1);
			text-align: center;
		}
		.form{
			overflow: hidden;
			.form-item{
				display: flex;
				width: 100%;
				height: 100rpx;
				color: #3C3C3C;
				font-size: 32rpx;
				line-height: 100rpx;
				padding-left: 40rpx;
				border-bottom: 1rpx solid #DEDEDE;
				>label{
					flex: 2;
					margin-right: 20rpx;
				}
				>input{
					flex: 6;
					height: 100rpx;
					margin-right: 60rpx;
				}
			}
			.form-item:last-child{
				border-bottom-width: 0;
			}
		}
		.tips{
			height: 140rpx;
			line-height: 45rpx;
			.tips_item{
				position: relative;
				top: 50%;
				transform: translateY(-50%);
			}
		}
		.Identity_upload{
			padding: 20rpx;
			.idcard_positive{
				height: 448rpx;
				position: relative;
				border: 1px solid #DEDEDE;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
			}
			.idcard_back{
				margin-top: 26rpx;
				height: 456rpx;
				position: relative;
				border: 1px solid #DEDEDE;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
			}
			.portrait_positive{
				margin-top: 26rpx;
				height: 664rpx;
				position: relative;
				border: 1px solid #DEDEDE;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
			}
			.idcard_positive_bg{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				text-align: center;
				.idcard_positive_bg_text{
					width: 326rpx;
					height: 56rpx;
					line-height: 56rpx;
					background-color: rgba(77, 139, 234, 0.45);
					font-size: 28rpx;
					color: #fff;
					text-align: center;
					margin-top: 36rpx;
				}
			}
		}
		.submit{
			background-color: #ED7D6B;
			margin: 46rpx 24rpx;
			color: #FFFFFF;
		}
	}
</style>
